<template>
    <div class="expenses">
        <div class="header">
            <h2>项目花费</h2>
            <div class="first-col">
                <span>项目预计金额:{{projectInfo.budget }}</span>
                <span>总花费：{{ expensesList.total }}</span>
                <el-button type="primary" class="button" @click="openAddExpenses">添加</el-button>
            </div>
            <div class="second-col">
                <span>其他费用表</span>
                <span>总花费:{{ expensesList.expenditure.total }}</span>
                <span>已支付:{{ expensesList.expenditure.prepaid }}</span>
                <span>待支付:{{ expensesList.expenditure.unpaid }}</span>
            </div>
        </div>
        <el-table :data="expensesList.expenditure.list" style="width: 100%">
            <el-table-column prop="date" label="时间" width="180">
            </el-table-column>
            <el-table-column prop="place" label="地点" width="180">
            </el-table-column>
            <el-table-column prop="user_id" label="人物">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="money" label="金额">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.status == '0' ? '待支付' : '已支付' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" @click="OpenModifyExpenses(scope.row)">修改
                    </el-button>
                    <el-button type="danger" @click="deleteExpenses(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加项目花费" :visible="addExpensesVisible" :show-close="false" width="30%">
            <el-form label-width="80px" :model="addExpensesForm" ref="addExpensesForm" :rules="rules">
                <el-form-item label="时间" prop="date">
                    <el-date-picker v-model="addExpensesForm.date" align="right" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="位置" prop="place">
                    <el-input v-model="addExpensesForm.place"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="addExpensesForm.description"></el-input>
                </el-form-item>
                <el-form-item label="工人id" prop="user_id">
                    <el-input v-model="addExpensesForm.user_id"></el-input>
                </el-form-item>
                <el-form-item label="支付状态" prop="status">
                    <el-select v-model="addExpensesForm.status" placeholder="请选择">
                        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="addExpensesForm.money"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addExpensesVisible = false">取 消</el-button>
                <el-button type="primary" @click="addExpenses('addExpensesForm')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改项目花费" :visible="modifyExpensesFormVisible" :show-close="false" width="30%">
            <el-form label-width="80px" :model="modifyExpensesForm" :rules="rules" ref="modifyExpensesForm">
                <el-form-item label="时间" prop="date">
                    <el-date-picker v-model="modifyExpensesForm.date" align="right" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="位置" prop="place">
                    <el-input v-model="modifyExpensesForm.place"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="modifyExpensesForm.description"></el-input>
                </el-form-item>
                <el-form-item label="支付状态" prop="status">
                    <el-select v-model="modifyExpensesForm.status" placeholder="请选择">
                        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="modifyExpensesForm.money"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click=" modifyExpensesFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifyExpenses('modifyExpensesForm')">确 定</el-button>
            </span>
        </el-dialog>
        <div class="employee-payroll">
            <span>员工工资表</span>
            <span>总花费：{{ expensesList.salary.total }}</span>
        </div>
        <el-table :data="expensesList.salary.list" style="width: 100%">
            <el-table-column prop="name" label="员工名称" width="180">
            </el-table-column>
            <el-table-column prop="total_salary" label="工资" width="180">
            </el-table-column>
            <el-table-column prop="type" label="工序">
            </el-table-column>
            <el-table-column prop="total_work_days" label="工天">
            </el-table-column>

        </el-table>
    </div>
</template>
<script>
export default {
    props: ['projectInfo'],
    data() {
        return {
            status: [{
                value: '1',
                label: '已支付'
            }, {
                value: '0',
                label: '未支付'
            }],
            project_id: '',
            addExpensesVisible: false,
            modifyExpensesFormVisible: false,
            expensesList: {},
            addExpensesForm: {
                project_id: ''
            },
            modifyExpensesForm: {},
            rules: {
                date: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                place: [
                    { required: true, message: '请输入地址', trigger: 'change' }
                ],
                user_id: [
                    { required: true, message: '请选择用户id', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择支付状态', trigger: 'change' }
                ],
                money: [
                    { required: true, message: '请选择金额', trigger: 'change' }
                ],
                description: [
                    { required: true, message: '请选择描述', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        // 获取列表
        getExpensesList(id) {
            this.$http.get(`/admin/auth/getExpenditure?project_id=${id}`).then(res => {
                if (res.data.status == 200) {
                    this.expensesList = res.data.data
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.message
                    })
                }
            })
        },
        // 打开添加框
        openAddExpenses() {
            this.addExpensesVisible = true
        },
        addExpenses(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/admin/auth/addExpenditure', this.addExpensesForm).then(res => {
                        if (res.data.status == 200) {
                            console.log(res)
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            })
                            this.getExpensesList(this.project_id)
                            this.addExpensesVisible = false
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 删除花费记录
        deleteExpenses(e) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(`/admin/auth/deleteExpenditure?id=${e.id}`).then(res => {
                    console.log(res)
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        })
                        this.getExpensesList(this.project_id)
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        })
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        OpenModifyExpenses(data) {
            this.modifyExpensesForm = data
            this.modifyExpensesFormVisible = true
        },
        modifyExpenses(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/admin/auth/editExpenditure', this.modifyExpensesForm).then(res => {
                        console.log(res)
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            })
                            this.getExpensesList(this.project_id)
                            this.modifyExpensesFormVisible = false
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            })
                        }
                    })
                } else {

                }
            })


        }
    },
    mounted() {
        this.project_id = this.projectInfo.id
        this.addExpensesForm.project_id = this.project_id
        this.getExpensesList(this.project_id)
    }
}
</script>
<style scoped lang="less">
.expenses {
    box-sizing: border-box;
    position: absolute;
    left: 200px;
    top: 0;
    display: inline-block;
    width: 900px;
    padding: 20px;
    height: 90vh;
}

.header {
    h2 {
        text-align: center;
        font-size: 50px;
    }

    .first-col {
        margin-top: 50px;

        span {
            margin-right: 200px;
        }

        .button {
            margin-left: 40px;
        }
    }

    .second-col {
        margin: 20px 0 0 300px;

        span {
            margin-right: 50px;
        }
    }
}

.employee-payroll {
    margin: 20px 0 0 300px;

    span {
        margin-right: 50px;
    }
}
</style>